/*
 * @Author: your name
 * @Date: 2020-11-21 12:52:02
 * @LastEditTime: 2020-11-25 23:02:55
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \demo01\src\Xiaojiejie.js
 */
// import React, { Component, Fragment } from 'react'

//Fragment组件的用法 return返回的内容必须包裹在一个容器里面 除了用div，可以用这个组件同样的效果
//父组件向子组件传递参数 父子组件传值以及拆分

// import axious from 'axious'
import React, { Component } from 'react'
import './style.css'
import XiaojiejieItem from './XiaojiejieItem'
import Boss from './Boss'


class Xiaojiejie extends Component {
    //声明周期函数：在某一时刻 可以自动执行的函数 ES6独立语法，
    constructor(props) {
        super(props)
        this.state = {
            inputValue: '',
            list: ['王俊凯','计算机','古风','自信 善良']
        }
    }

    
// 在这里写的话，RN 有问题了
    componentWillMount() {
        console.log('componentWillMount-----组件将要挂在页面的时刻');
    }

    // 在这里 生命周期函数，使用，获取获取远程数据。这个组件在DOM加载完之后，执行的一个函数
    //为什么呢？
    componentDidMount() {
        console.log('componentWillMount-----组件挂载完成');
    }

    shouldComponentUpdate() {
        //优化性能 用户很大
        console.log('1-shouldComponentUpdate----在组建更新之前执行');
        return true
        // return false 不进行渲染
    }

    componentWillUpdate() {
        console.log('1-componentWillUpdate--');
    }

    componentDidUpdate() {
        console.log('4-componentDidUpdate---一切更新完了 再执行');
    }

    // 这是属性props当中独有的，写在这里不好使，不会输出任何东西
    //因为 此文件是一个顶层组件，不接受任何的属性 参数
    componentWillReciveProps() {
        console.log('componentWillReciveProps');
    }
    render() {
        // axious.post 有问题，容易搞垮远程数据
        console.log('3-render------组件挂载中的时间');
        //渲染 自动执行 也是一种自动执行函数
        return (
            // <Fragment>
            <div>
                <div>
                    {/* for防止与JS的for重复,所以就用HTMLfor */}
                    <label htmlFor="jspang">增加选择：</label>
                    <input
                        id="jspang"
                        className="input"
                        value={this.state.inputValue}
                        onChange={this.inputChange.bind(this)}
                        ref = {(input)=>{this.input = input}}
                    />
                    <button onClick={this.addList.bind(this)}>Add</button>
                </div>
                <ul ref={(ul)=>{this.ul=ul}}>
                    {/* <li>Merry</li>
                    <li>认知理论</li> */}
                    {
                        this.state.list.map((item, index) => {
                            return (
                                // <li key={index + item}
                                //     onClick={this.deleteItem.bind(this, index)}
                                //     dangerouslySetInnerHTML={{ __html: item }}
                                //     // 对输入字符进行解析 比如<h2>hh</h2>
                                // >
                                //     {/* {item} */}
                                // </li>
                                <XiaojiejieItem 
                                    // avname="相信支持"
                                    //属性的方式
                                    key={index+item}
                                    content={item}
                                    index={index}
                                    list={this.state.list}//只能使用 补课修改
                                    deleteItem={this.deleteItem.bind(this)}
                                  />
                            )
                            // 避免重复
                        }) 
                    }
                </ul>

                <Boss />
            </div>
            // </Fragment>
        )
    }
    inputChange(e) {
        // console.log(e.target.value);
        // console.log(this);
        // 还没有进行赋值
        // this.state.inputValue = e.target.value;
        // 错误 this指向错误，
        // this.setState({
        //     inputValue: e.target.value
        // })//实现赋值

        this.setState({
            inputValue: this.input.value
        })
    }

    //增加列表
    addList() {
        this.setState({
            list: [...this.state.list, this.state.inputValue],
            inputValue:' '//输入之后 变为空
            // list: ['karry','computer', this.state.inputValue]
            // 扩展运算符
        }, () => {
                console.log(this.ul.querySelectorAll('li').length);//一个坑
        })//一个回调函数 解决这个问题(虚拟DOM)
        //改变状态 是一个异步的方法 执行有时间，还没有执行的时候，就已经打印出了长度
        // console.log(this.ul.querySelectorAll('li').length);//一个坑
    }

    // 删除列表项
    deleteItem(index) {
        console.log(index);
        let list = this.state.list//先声明一个变量 把我们的state里面的list赋值
        list.splice(index, 1)
        this.setState({
            list:this.state.list
        })

        //下面的操作可以实现效果 但是不准这样做，不易于维护，性能障碍 一个巨大的坑，不能直接对变量进行操作
        // this.state.list.splice(index,1)
        // this.setState({
        //     list:this.state.list
        // })
    }
}
    // 初始化数据 可以认为是固定的写法

export default Xiaojiejie
// 第14集 非常重要
// 三个重要的理论知识点 1 单向数据流 2 可不可以和其他框架结合使用 3，函数式编程

/*npm install axios(xxxx库)
不常用 安装到项目目录下 不添加任何依赖，
npm install -g axios   prefix
把包安装到 全局，设置到哪里安装到哪里
npm install - save axios
把库下载到目录下 添加一个依赖 
apm install -save-dev axios  dev
生产环境中使用 
*/